<!-- 说明 -->
<!-- @author w -->
<template>
    <div class="page">
        <img src="../../assets/fx/share-bg.jpg" style="width: 100%" />
        <div class="ap">
            <div class="content">
                <!-- <div>
                </div> -->
                <div class="addBack">
                    <div class="title">众成智付展业端注册</div>
                    <div class="form">
                        <div class="fo">
                            <van-field v-model="phoneNo" type="number" placeholder="请输入手机号" />
                        </div>
                        <div class="bor"></div>
                        <div class="fo">
                            <van-field v-model="authcode" center type="number" clearable placeholder="请输入验证码">
                                <template #button>
                                    <span @click="getcode" v-if="allow">{{ '发送验证码' }}</span>
                                    <span v-if="!allow">{{ time + '重新获取' }}</span>
                                    <!-- <van-button size="mini" type="primary"  @click="getcode">发送验证码</van-button>-->
                                </template>
                            </van-field>
                        </div>
                        <div class="bor"></div>
                        <div class="fo">
                            <van-field v-model="identityNo" clearable type="text" placeholder="身份证号" />
                        </div>
                        <div class="bor"></div>
                        <div class="fo">
                            <van-field v-model="password" clearable type="password" placeholder="6-18位数字和密码组合" />
                        </div>
                        <div class="bor"></div>
                        <div class="fo">
                            <van-field v-model="passwordTwo" clearable type="password" placeholder="确认6-18位数字和密码组合" />
                        </div>
                        <div class="bor"></div>
                    </div>
                    <div>
                        <div class="btn" @click="login">注册</div>
                    </div>
                </div>
                <div>
                    <div class="btn down" @click="down">下载APP</div>
                </div>
            </div>
        </div>
        <div class="mask" v-show="aaa" @click="aaa = false">
            <img class="jj" src="../../assets/fx/jj.png" alt="" />
            <div class="uu">
                <img src="../../assets/fx/uu.png" alt="" />
                <div class="c">点击右上角，选择默认浏览器打开~~</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getSecurityCode, share } from '@/api/news'
import { showToast, showSuccessToast } from 'vant'
// import JSEncrypt from '@/utils/jsencrypt.js'
import JSEncrypt from 'jsencrypt'
import router from "@/router";
export default {
    name: 'Home',
    data() {
        return {
            url: '',
            phoneNo: '',
            authcode: '',
            time: 60,
            identityNo: '',
            passwordTwo: '',
            password: '',
            checked: false,
            aaa: false,
            allow: true,
            disabled: false,
            value2: ''
        }
    },
    created() {},
    methods: {
        al() {
            this.aaa = true
        },
        isWeixin() {
            const ua = window.navigator.userAgent.toLowerCase()
            if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
                return true
            } else {
                return false
            }
        },
        down() {
            window.open('http://open.lianzhongbao.cn:28082/static/com.meitianpay.agent.apk', '_blank')
        },
        //获取验证码
        getcode() {
            if (this.phoneNo.length == 11) {
                getSecurityCode({
                    username: this.phoneNo,
                    agencySource: this.$route.query.agencySource
                }).then(res => {
                    if (res.code === 200) {
                        showSuccessToast('获取成功')
                        this.code = res.object.securityCode
                        if (this.allow) {
                            this.allow = false
                            const start = setInterval(() => {
                                if (this.time > 0) {
                                    this.time--
                                    this.disabled = true
                                } else {
                                    this.allow = true
                                    this.time = 60
                                    clearInterval(start)
                                    this.disabled = false
                                }
                            }, 1000)
                        }
                    } else {
                        showToast(res.message)
                    }
                })
            } else {
                showToast('请输入正确的手机号')
            }
        },
        //注册
        login() {
            if (!this.phoneNo.length) {
                showToast('手机号码不能为空')
                return
            }
            if (!/^1[23456789]\d{9}$/.test(this.phoneNo)) {
                showToast('手机号码有误，请重填')
                return
            }
            // if (this.showyz == true) {
            //   showToast("请同意《用户隐私协议》");
            //   return;
            // }
            if (!this.authcode.length) {
                showToast('验证码不能为空')
                return
            }
            if (!this.password.length) {
                showToast('请输入密码')
                return
            }
            if (!this.identityNo.length) {
                showToast('请输入身份证')
                return
            }
            if (this.password !== this.passwordTwo) {
                showToast('两次密码不一致，请检查')
                return
            }
            if (this.password.length < 6) {
                showToast('密码不能小于6位')
                return
            }
            if (this.password.length > 18) {
                showToast('密码不能大于18位')
                return
            }
            const password = this.password
            const key =
                'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAicjwP+F30h1RmMZuAjKIW7+pJxK6NlhvsNks28X4/91iF7lBoZd57ZuN+310vaFxol8khFd5SDbnx7piqPxuAaUC/IygD4iPn2ZSSA5pqqdQYodJVckyh4PNjbh6lDkjYNoAGhz1BY+AiQz2uPTNFnOqmDu1ZfhoQCWMhSleW0zikybl3KRcczDja96+DmKkssXAYN5clnnZMcBjuWOwBz5pgHiQEQTatdWm/un3SR366LrnKAXYUyAEUxwuEA9qtiaDvKgLzSl84FqmvU6cLzmLJM+b+++0CONoT0IR9I6XFkF/wErnd8Y+gEB4oQEURe39BUjl5VcxSJxf1HorSQIDAQAB'
            // 调注册接口
            const jse = new JSEncrypt()
            jse.setPublicKey(key)
            const newPassword = jse.encrypt(password)
            share(
                {
                    username: this.phoneNo,
                    securityCode: this.authcode,
                    inviterCode: this.$route.query.shareCode,
                    agencySource: this.$route.query.agencySource,
                    identityNo: this.identityNo,

                    // password:this.password,
                    appVersion: this.$route.query.appVersion,
                    password: newPassword
                },
                { appVersion: this.$route.query.appVersion }
            ).then(res => {
                // },{appVersion: this.$route.query.appVersion}).then(res => {
                if (res.code == 200) {
                    this.$router.push('/success')
                } else {
                    showToast(res.message)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.mask {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;

    .jj {
        width: 100px;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .uu {
        position: absolute;
        right: 50%;
        top: 30%;
        transform: translate(50%, -50%);
        color: #ffffff;

        img {
            width: 200px;
        }

        .c {
            position: absolute;
            letter-spacing: 1px;
            top: 0;
            padding: 20px;
        }
    }
}

.logo-box {
    width: 88px;
    height: 88px;
    padding: 5px;
    margin: 0 auto;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

.ap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;

    width: 100%;

    .fo {
        display: flex;
        padding: 0 10px;
        align-items: center;

        img {
            height: 20px;
            width: 20px;
        }
    }
}

.top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 10%;
    z-index: 2;
}

.name {
    text-align: center;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 50px;
    opacity: 1;
}

.ap {
    height: 100%;
    width: 100%;
}

.content {
    height: 100%;

    .addBack {
        padding: 10px 25px;
        margin-top: 150px;
        background-color: #ffffff;
        box-sizing: border-box;
        border-radius: 20px;

        .title {
            font-size: 20px;
            font-weight: bold;
            width: 200px;
            margin: 0 auto;
            color: black;
            text-align: center;
            padding: 10px;
            border-bottom: 3px solid #ffffff;
            opacity: 1;
        }
    }

    padding: 10px 25px;
    box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .form {
        margin-top: 10px;

        .bor {
            opacity: 1;
            border-bottom: 1px solid #c8c8c8;
        }

        .van-cell {
            padding: 15px !important;

            .van-field__left-icon {
                margin-right: 20px;
            }

            .van-icon {
                font-size: 23px;
            }
        }
    }

    .btn {
        height: 43px;
        width: 261px;
        background-size: 100% 100%;
        margin: 20px auto;
        font-size: 16px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000;
        border-radius: 25px;
        border: 3px solid #ff6e38;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .down {
        border: none;
        color: #fffffe;
    }
}
</style>
<style lang="scss">
.van-cell {
    background-color: transparent;
}
</style>
